'use client'
import React, {useState} from "react"
import styles from "./index.module.scss"
import Image from "next/image"

interface MyCoverProps{
  className?: string
  nickname?: string
  signature?: string
  openEdit: () => void
}

const MyCover: React.FC<MyCoverProps> = ({className = '', openEdit, nickname, signature = '写一下个性签名吧~'}) => {
  return(<div className={`${className} ${styles['myCover-component']}`}>
    <div className={`${styles["settings"]}`}>
      <span className="fa fa-solid fa-gear" onClick={() => openEdit()}></span>
    </div>
    <div className={`${styles["name-signa"]}`}>
      <div className={`${styles["nickName"]}`}>{nickname}</div>
      <div className={`${styles["signature"]}`}>{signature}</div>
    </div>
    <div className={`${styles["user-img"]}`}>
        <Image  src={"/user-avator.jpg"} alt="user pic" width={60} height={60} className={`${styles["pic"]}`}/>
    </div>
  </div>)
}

export default MyCover;